<template>
	<view class="menu">
		<!-- 头部背景图 -->
		<view class="headerBg">
			<image src="../../static/images/img/index_bg.jpg" mode="center"></image>
		</view>

		<!-- 商家信息 -->
		<view class="BusinessInfo">
			<view class="info">
				<text class="infoName">{{tableNum ? '当前桌号：' + tableNum : '未落座'}}</text>
			</view>
			<view class="avatar">
				<image src="../../static/images/img/avatar.jpg" mode="aspectFit"></image>
			</view>
		</view>

		<view class="menuBox">
			<!-- 分类 -->
			<view class="classification">
				<scroll-view scroll-y="true" scroll-with-animation :scroll-top="verticalNavTop">
					<view :class="['item',active == index ? 'active' : '']" :key='item._id' v-for="(item,index) in list" @tap="selectCategories(item._id)">{{item.title}}</view>
				</scroll-view>
			</view>

			<!-- 菜品 -->
			<view class="variety">
				<scroll-view scroll-y scroll-with-animation :scroll-into-view="'main'+mainCur" @scroll="VerticalMain">
					<view class="menuTypeBox" v-for="(item,index) in list" :key="item._id" :id="'main'+item._id" v-show="item.children!=0">
						<view class="title">{{item.title}}</view>
						<u-card v-for="v in item.children" :key="v._id" box-shadow="-2px 4px 5px #d1d3e0" margin="20rpx">
							<view class="cardTemplate" slot="body" @click="showDetails(v)">
								<view class="left">
									<image :src="baseURL + v.thumb" mode="aspectFill"></image>
								</view>
								<view class="right">
									<view class="name">{{v.title}}</view>
									<view class="price">￥{{v.price}}</view>
									<view class="btn">
										<button v-if="v.num>0" class="cu-btn cuIcon sm reduce" @tap.stop="reduceMenu(v)">-</button>
										<text v-if="v.num>0">{{v.num}}</text>
										<button class="cu-btn cuIcon bg-green sm" @tap.stop="addMenu(v)">+</button>
									</view>
								</view>
							</view>
						</u-card>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 购物车栏 -->
		<view class="cartBox" v-if="isScan">
			<view class="cart">
				<view class="left" @tap="showCart">
					<u-icon name="shopping-cart" color="#fff" size="50"></u-icon>
					<view class="num" v-if="cartNum!=0">{{cartNum}}</view>
					<view class="price" v-if="cartNum!=0">￥<text>{{totalPrice}}</text></view>
				</view>
				<view :class="[cartNum==0?'':'active','right']" @tap="submit">
					去结算
				</view>
			</view>
		</view>

		<!-- 未落座 -->
		<u-button v-else @click="scan" class="scan" type="success" :ripple="true" shape="circle">
			<u-icon name="scan"></u-icon>未落座，请扫码落座
		</u-button>

		<!-- 购物商品 -->
		<view class="cu-modal bottom-modal" :class="show?'show':''" @tap="show=false">
			<view class="cu-dialog" @tap.stop>
				<view class="header">
					<view class="left">已选商品</view>
					<view class="right" @tap.stop="clearCart">清空购物车</view>
				</view>
				<view class="good" v-for="item in cartList" :key="item._id">
					<view class="left">
						<view class="img">
							<image :src="baseURL + item.thumb" mode="aspectFit"></image>
						</view>
						<view class="info">
							<view class="title">{{item.title}}</view>
							<view class="price">￥{{item.price}}</view>
						</view>
					</view>
					<view class="right">
						<button class="cu-btn cuIcon sm reduce" @tap.stop="reduceMenu(item)">-</button>
						{{item.num}}
						<button class="cu-btn cuIcon bg-green sm" @tap.stop="addMenu(item)">+</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 商品详情 -->
		<u-popup v-model="showMenuDetail" close-icon-color="#fff" closeable mode="center" border-radius="20" width="80%">
			<view class="menuDetailBox">
				<view class="img">
					<image :src="baseURL + details.thumb" mode="aspectFill"></image>
				</view>
				<view class="content">
					<view class="title">{{details.title}}</view>
					<view class="desc">
						<view>详情</view>
						<view class="text">{{details.details}}</view>
					</view>
					<view class="footer">
						<view class="price">￥{{details.price}}</view>
						<view class="btn">
							<button v-if="details.num>0" class="cu-btn cuIcon sm reduce" @tap="reduceMenu(details)">-</button>
							<text v-if="details.num>0">{{details.num}}</text>
							<button class="cu-btn cuIcon bg-green sm" @tap="addMenu(details)">+</button>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

		<u-toast ref="uToast" />
		<!-- tabbar -->
		<Tabbar />
	</view>
</template>

<script>
	import Tabbar from '../../components/Tabbar.vue'
	import {
		baseURL
	} from '../../api/request.js'
	import {
		getMenu
	} from '../../api/api.js'

	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				baseURL,
				verticalNavTop: 0, //分类栏滚动区域
				mainCur: 0, //选中id
				load: true,
				active: 0, //选中状态
				thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				list: [], //菜单列表
				show: false, //显示购物车
				cartList: [], //购物车列表
				cartNum: 0, //购物车数量
				isScan: false, //是否落座
				showMenuDetail: false, //显示商品详情
				details: {}, //商品详情
				tableNum: '', //桌号
			}
		},
		onLoad(options) {
			this.getMenu()
		},
		onShow(options) {
			if (getApp().globalData.tableNum != '') {
				this.isScan = true
				this.tableNum = getApp().globalData.tableNum
			}
			if (getApp().globalData.clear == true) {
				getApp().globalData.clear = false
				this.clearCart()
				uni.switchTab({
					url: '../order/order'
				})
			}
		},
		methods: {
			//查看详情
			async showDetails(v) {
				this.details = v
				this.showMenuDetail = true
			},
			//扫码落座
			scan() {
				const that = this
				uni.scanCode({
					onlyFromCamera: true,
					success(res) {
						getApp().globalData.tableNum = res.result
						that.tableNum = res.result
						that.isScan = true
					}
				})
			},
			showCart() {
				if (this.cartList.length == 0) return this.$refs.uToast.show({
					title: '请选择商品',
				})
				this.show = !this.show
			},
			//清空购物车
			clearCart() {
				this.cartList = []
				this.cartNum = 0
				this.list.forEach(item => item.children.forEach(v => v.num = 0))
				this.show = false
			},
			//提交订单
			submit() {
				if (this.cartList.length == 0) return
				if (!uni.getStorageSync('token')) {
					uni.switchTab({
						url: '../me/me'
					})
					return uni.showToast({
						title: '您还未登录,请先登录',
						icon: 'none',
						duration: 2000
					})
				}
				let data = {}
				data.cartList = this.cartList
				data.totalPrice = this.totalPrice
				data.num = this.cartNum
				getApp().globalData.cartData = data
				uni.navigateTo({
					url: './settlement'
				})
			},
			// 添加到购物车
			addMenu(item) {
				this.cartNum++
				if (this.cartList.length == 0) {
					item.num++
					return this.cartList.push(item)
				}
				const index = this.cartList.findIndex(v => v._id == item._id)
				if (index == -1) {
					item.num++
					this.cartList.push(item)
				} else {
					this.cartList[index].num++
					this.$forceUpdate()
				}
			},
			// 删除购物车
			reduceMenu(item) {
				this.cartNum--
				const index = this.cartList.findIndex(v => v._id == item._id)
				this.cartList[index].num--
				if (this.cartList[index].num == 0) this.cartList.splice(index, 1)
				this.$forceUpdate()
			},
			//获取菜单列表
			async getMenu() {
				const res = await getMenu()
				res.data.forEach(item => item.children.forEach(v => v.num = 0))
				this.list = res.data
			},
			//选中分类
			selectCategories(index) {
				this.verticalNavTop = (index - 1) * 40
				this.active = index
				this.mainCur = index
			},
			//滚动菜单事件
			VerticalMain(e) {
				let that = this
				let tabHeight = 0
				if (this.load) {
					for (let i = 0; i < this.list.length; i++) {
						let view = uni.createSelectorQuery().select('#main' + this.list[i]._id)
						view.fields({
							size: true
						}, data => {
							console.log(data);
							this.list[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.list[i].bottom = tabHeight;
						}).exec()
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.verticalNavTop = (i - 1) * 50
						this.active = i
						return false
					}
				}
			}
		},
		computed: {
			totalPrice() {
				let price = 0
				this.cartList.forEach(v => {
					price += v.price * v.num
				})
				return price
			}
		}
	}
</script>

<style lang="scss" scoped>
	.menu {
		.headerBg {
			image {
				width: 100%;
				display: inline-block;
				height: 200upx;
			}
		}

		.BusinessInfo {
			position: relative;
			padding: 20upx 30upx;
			background-color: #fff;
			border-bottom: 1px solid #dddddd;

			.info {}

			.avatar {
				width: 100upx;
				height: 100upx;
				border-radius: 50%;
				overflow: hidden;
				position: absolute;
				top: -56upx;
				right: 20upx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.menuBox {
			display: flex;
			justify-content: flex-start;

			.classification {
				margin-top: 20upx;
				flex: 1;
				background: #fff;
				box-shadow: 2px 4px 5px #d1d3e0;
				border-top-right-radius: 14upx;

				scroll-view {
					width: 100%;
					height: 57vh;

					view.item {
						width: 100%;
						padding: 20upx 0 20upx 30upx;
					}

					view.active {
						border-left: 3px solid $themeColor;
						color: $themeColor;
						font-weight: bold;
					}
				}
			}

			.variety {
				margin-top: 20upx;
				flex: 3;

				scroll-view {
					width: 100%;
					height: 60vh;
					background-color: #eeeeee;

					.menuTypeBox {
						.title {
							margin-left: 20upx;
							font-size: 12px;
						}

						.u-card {
							box-shadow: 5px 5px 5px #d0d2df;

							.cardTemplate {
								display: flex;
								justify-content: flex-start;
								align-items: center;

								.left {
									flex: 1;

									image {
										height: 130upx;
										width: 100%;
									}
								}

								.right {
									flex: 1;
									overflow: hidden;
									font-size: 16px;

									button {
										font-size: 20px;
										margin: 0 10upx;
									}

									.name {
										font-weight: bold;
										font-size: 16px;
									}

									view {
										text-align: right;
										margin-bottom: 10upx;
									}
								}
							}
						}
					}
				}
			}
		}

		.scan {
			padding-bottom: env(safe-area-inset-bottom);
			left: 50%;
			width: 60%;
			position: fixed;
			bottom: 140upx;
			z-index: 100;
			transform: translateX(-50%);
			font-size: 26px;

			u-icon {
				margin-right: 10px;
			}
		}

		.cartBox {
			padding-bottom: env(safe-area-inset-bottom);
			left: 50%;
			width: 95%;
			position: fixed;
			bottom: 140upx;
			z-index: 100;

			.cart {
				height: 80upx;
				transform: translateX(-50%);
				border-radius: 40upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				overflow: hidden;
				color: #fff;

				view {
					height: 100%;
					line-height: 80upx;
				}

				.left {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					background-color: #3b3838;
					flex-grow: 1;
					padding-left: 30upx;

					.price {
						margin-left: 40upx;

						text {
							font-size: 18px;
						}
					}
				}

				.active {
					background-color: $themeColor !important;
				}

				.right {
					color: #fff;
					background-color: #b3b3b3;
					font-size: 13px;
					padding: 0 30upx;
					height: 100%;
					line-height: 80upx;
				}

				.num {
					position: absolute;
					top: 8upx;
					left: 70upx;
					background-color: $themeColor;
					color: #fff;
					width: 35upx;
					height: 35upx;
					line-height: 35upx;
					text-align: center;
					border-radius: 50%;
				}
			}

		}

		.cu-modal {
			z-index: 50;
			padding-bottom: env(safe-area-inset-bottom);

			.cu-dialog {
				padding-bottom: 220upx;

				.header {
					height: 80upx;
					background-color: #f2f2f2;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 30upx;
				}

				.good {
					display: flex;
					margin: 20upx 0;
					justify-content: space-between;
					align-items: center;
					height: 150upx;
					padding: 0 30upx;

					.left {
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 100%;

						.img {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 150upx;
							height: 100%;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.info {
							padding: 20upx 0;
							display: flex;
							flex-wrap: wrap;
							align-content: space-between;
							justify-content: flex-start;
							height: 100%;
							margin-left: 20upx;
							font-weight: bold;

							view {
								width: 100%;
								text-align: left;
							}
						}
					}

					.right {
						font-size: 16px;

						button {
							font-size: 20px;
							margin: 0 10upx;
						}
					}
				}
			}
		}

		.reduce {
			background-color: #fff;
			border: 1px solid #39b54a;
			color: #39b54a;
		}

		u-popup {
			.menuDetailBox {
				overflow: hidden;

				.img {
					width: 100%;
					height: 300upx;

					image {
						height: 100%;
						width: 100%;
					}
				}

				.content {
					position: relative;
					z-index: 10;
					overflow: hidden;
					background-color: #fff;
					border-radius: 20upx;
					margin-top: -20upx;
					padding: 30upx;

					.title {
						margin-top: 10upx;
						font-size: 18px;
						border-bottom: 1px solid #CCCCCC;
						padding-bottom: 10upx;
						margin-bottom: 30upx;
					}

					.desc {
						color: #ccc;
						font-size: 12px;
						padding-bottom: 20upx;

						.text {
							font-size: 14px;
							color: #000;
							margin-top: 10upx;
						}
					}

					.footer {
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-top: 1px solid #ccc;
						padding-top: 30upx;

						.btn {
							display: flex;
							align-items: center;
							font-size: 16px;

							button {
								font-size: 20px;
								margin: 0 10upx;
								vertical-align: middle;
							}
						}

					}
				}
			}
		}

	}
</style>
